<template>

  <transition name="section">
    <section v-if='visible'>

      <div class="xAxis-tag-wrap">
        <el-tag
          :closable="true"
          :close-transition="false"
          @close="handleClose"
          v-show='visible'
          type="primary"
          >
            {{tagName}}
        </el-tag>
      </div>
      <div class="check-box-wrap">
        <el-checkbox-group :min='1' v-model='selected' @change='emitData'>
          <span class="select" :style="setWidth()" v-for='(k,i) in selectList' :key='i'>
            <el-checkbox :label='k.value'>{{k.label}}</el-checkbox>
          </span>
        </el-checkbox-group>
      </div>
      
    </section>

  </transition>

</template>

<script>
export default {
	props: {
		selectList: {
			type: Array,
			default: []
		},
		tagName: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: false
		},
		spanWidth:{
			type:Number,
			default:0
		}
	},
	data () {
		return {
			selected: [this.selectList[0].value]
		}
	},
	watch: {
		visible (newValue) {
			newValue == false && (this.handleClose())
			newValue == true && (this.emitData())
		}
	},
	methods: {

		setWidth(){
			if(this.spanWidth) {
				return `width:${this.spanWidth}px`
			}
		},

		emitData () {
			this.$nextTick(() => {
				this.$emit('getSelected', this.selected.join(','))
			})
		},
		handleClose () {
			this.selected = []
			this.$emit('update:visible', false)
			this.emitData()
		}
	},
}
</script>

<style scoped lang='less'>

.section-enter-active {
  transition: all 0.4s;
}

.section-leave-active {
  transition: all .4s;
}
.section-enter {
  opacity: 0;
  transform: translateY(-50px);
}

.section-leave-to {
  opacity: 0;
  transform: translateX(200px);
}

section {
  margin: 30px 0;
  overflow: hidden;
  width: 900px;
  .select {
    display: inline-block;
    padding: 0 10px;
  }

  .select:last-of-type {
    padding-right: 0;
  }
  .xAxis-tag-wrap {
    float: left;
    width: 120px;
    margin-right: 3px;
  }
  .check-box-wrap {
    float: left;
    width: 700px;
  }
}
</style>
<style>
.xAxis-tag-wrap .el-tag.el-tag--primary {
  font-size: 14px;
  line-height: 26px;
  height: 28px;
}
</style>
